<script setup lang="ts">
import { reactive, ref } from "vue";

// 宫格参数定义
let grid = reactive({
  list: [
    { id: 1, data: {}, show: false },
    { id: 2, data: {}, show: false },
    { id: 3, data: {}, show: false },
    { id: 4, data: {}, show: false },
  ],
});
// 列表参数定义
let listItem = reactive({
  list: [1, 2, 3, 4],
});
// 列表多选数组
let includesList = ref([]);

/**
 * 宫格加载
 * */
function flex(): void {}

/***
 * 列表点击事件
 * */
function onClick(d: number, index: number): void {
  if (includesList.value.includes(d)) {
    includesList.value = includesList.value.filter((res) => res != d);
    grid.list.forEach((res) => {
      res.data = {};
      res.show = false;
    });
  } else {
    for (let i = 0; i < grid.list.length; i++) {
      if (JSON.stringify(grid.list[i].data) == "{}") {
        grid.list[i].data = { id: d };
        grid.list[i].show = true;
        requestFn().then((res) => {
          grid.list[i].show = false;
        });
        break;
      }
    }
    includesList.value.push(d);
  }
}

/**
 * 接口请求
 * **/
function requestFn(): Promise<Boolean> {
  return new Promise(function (res, rej) {
    setTimeout(() => {
      console.log(11);
      res(true);
    }, 2000);
  });
}
</script>
<template>
  <div>
    <!-- 区域loading示例 -->
    <div class="page-body">
      <div class="page">
        <div class="page-box" v-for="(d, index) in grid.list" :key="index">
          <div class="page-text" v-if="d.show">加载中...</div>
        </div>
      </div>
    </div>

    <div class="page-fixed">
      <div class="page-flex">
        <div
          :class="includesList.includes(d) ? 'right-bgc' : ''"
          v-for="(d, index) in listItem.list"
          :key="index"
          @click="onClick(d, index)"
        >
          <div class="page-content-center">
            {{ d }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.right-bgc {
  background-color: red;
}
.page-flex {
  text-align: center;
}
.page-content-center {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.page-flex > div {
  height: 30px;
  cursor: pointer;
  outline: 1px solid red;
  margin: 12px 12px 0px 12px;
}
.page-fixed {
  width: 200px;
  color: #fff;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  right: 0;
  height: 100%;
}
.page-text {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-body {
}
.page {
  position: absolute;
  height: calc(100% - 60px);
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.page-box {
  position: relative;
  width: calc(100% / 2);
  outline: 1px solid red;
}
</style>
